	<div class="item" style = "border-top: 1px solid #B6B9BA;">
		<div class="label">Display Style</div>
		<select name="display-style">
			<option value="total" >Total</option>
			<option value="percent-change" >New, +%change</option>
			<option value="percent-complete" >Percent Complete</option>
			<option value="trend" >Trend</option>
			<option value="map" >Map</option>
			<option value="vs-trend" >vs. Others (trend)</option>
			<option value="vs-pie" >vs. Others (pie)</option>
			<option value="vs-map" >vs. Others (map)</option>
		</select>
	</div>
	{% include "duration.html" %}
	<div id="{{wid}}-props-goal">
		<div class="item">
			<div class="label">Goal</div>
			<input type="text" name="goal" />
		</div>
	</div>
		
<script>
(function()
{
	var $time_span = $("#{{wid}}-props-form-time-span");
	var $goal      = $("#{{wid}}-props-goal");
	hide_all();
	$("#{{wid}}-props-form [name='display-style']").change(function(e)
	{
		hide_all();
		var v = e.target.value;
		if (v.indexOf("vs")==0)
		{
			$_grid.widget_grid('convertToCorrelation', '{{wid}}', v.substring(3))
			return;
		}
		switch(v)
		{
			case 'trend':
			case 'percent-change':
				$time_span.show();
				break;
			case 'percent-complete':
				$goal.show();
				break;
		}
		$_grid.widget_grid('updateProps', '{{wid}}', v)
	});
	function hide_all()
	{
		$time_span.hide();
		$goal.hide();
	}
})();
</script>